<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
</head>
<body>
<!--layui表单-->
<div class="layui-fluid">
<div class="layui-card">
  <div class="layui-card-header">新增用户</div>
  <div class="layui-card-body" style="padding: 15px;">
    <form class="layui-form" id="layui-form" action="" lay-filter="component-form-group">
      <div class="layui-col-md6">
          <div class="layui-form-item">
              <label class="layui-form-label">登录名</label>
              <div class="layui-input-inline">
                  <input type="text" name="loginName" value="" class="layui-input" lay-verify="required" placeholder="请输入用户名称" autocomplete="on"/>
              </div>
              <div class="layui-form-mid layui-word-aux">不为空</div>
          </div>
      </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">设置密码</label>
                <div class="layui-input-inline">
                    <input id="pwd" type="password" name="pwd" lay-verify="pass|required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" custom-tips="输入3-16位字符">仅限16位</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" lay-verify="repass|required" placeholder="请重复密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">重复</div>
            </div>
        </div>
      <div class="layui-col-md6">
          <div class="layui-form-item">
              <label class="layui-form-label">头像</label>
              <div class="layui-input-inline">
                  <input type="text" name="img" value="" class="layui-input" placeholder="请导入图像"  autocomplete="on"/>
              </div>
              <div class="layui-form-mid layui-word-aux">选填</div>
          </div>
      </div>
      <div class="layui-col-md6">
          <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                  <input type="email" name="email" value="" class="layui-input" lay-verify="email" placeholder="请输入邮箱" autocomplete="on"/>
              </div>
            <div class="layui-form-mid layui-word-aux">不为空</div>
          </div>
      </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </div>
                <div class="layui-form-mid layui-word-aux">不为空</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="mobile" value="" class="layui-input" lay-verify="phone" placeholder="请输入手机" autocomplete="on"/>
                </div>
                <div class="layui-form-mid layui-word-aux">不为空</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="0">可用</option>
                        <option value="1">不可用</option>
                        <option value="2">封禁</option>
                        <option value="3">维护</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">不为空</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" value="" class="layui-input" lay-verify="required" placeholder="请输入昵称" autocomplete="on"/>
                </div>
                <div class="layui-form-mid layui-word-aux">不为空</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select id="roleId" name="roleId" lay-verify="required" lay-search="">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">可在角色中编辑</div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">部门机构</label>
                <div class="layui-input-inline">
                    <input type="hidden" id="orgId" name="orgId" value="" lay-verify="required">
                    <input type="text" id="tree" lay-filter="tree" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">重选</div>
            </div>
        </div>
      <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
          <div class="layui-footer" style="left: 0;">
            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
</div>
<script src="${ctxPath}/layuiadmin/layui/layui.js"></script>
<script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
<script src="${ctxPath}/js/layui-customtips.js"></script>
<script>
var parentdepartmentid = "11";
layui.config({
    base: '${ctxPath}/layuiadmin/'
  }).extend({
    index: 'lib/index'
    ,treeSelect:'/ext/treeSelect'
  }).use(['index', 'form', 'laydate','treeSelect'], function(){
//声明模块
{var $ = layui.$
,admin = layui.admin
,element = layui.element
,layer = layui.layer
,laydate = layui.laydate
,form = layui.form
,treeSelect=layui.treeSelect;}
//渲染下拉框
$.ajax({
    url:'${ctxPath}/getDataBySysRole',
    type:'post',
    data:{},
    dataType:'json',
    success:function( data ){
        if( data['code']=='0' ){
            console.log(data);
            var HTML="<option value=\"\">直接选择或搜索选择</option>";
            var arr=data['data'];
            for(var i=0;i<arr.length;i++){
                HTML+="<option";
                HTML+=" value=\""+arr[i]['id']+"\">"+arr[i]['name']+"</option>";
            }
            $("#roleId").append(HTML);

            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });
        }else{
            layer.msg('访问数据错误。',{icon:2,time:2000,offset:'20px'});
        }
    }
});
//渲染treeselect
    treeSelect.render({
        elem: '#tree',
        data: '${ctxPath}/getSysDepartMentTreeDataById?id=0',
        type: 'get',
        placeholder: '请选择部门',
        search: true,
        style: {folder: {enable: false},line: {enable: true}},
        click: function(d){
            $("#orgId").val(d.current.id);
        },
        success: function (d) {
            treeSelect.checkNode('tree', parentdepartmentid);
            var treeObj = treeSelect.zTree('tree');
            treeSelect.refresh('tree');
        }
    });
//监听表单提交
form.on('submit(component-form-demo1)', function(data){
      /*parent.layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      })*/
	  $.ajax(
		{
			url:'${ctxPath}/saveSysUser',
			type:'post',
			dataType:'json',
			data:data.field,
			success:function( data ){
				if( data.code=='0' ){
                    layer.msg( '新建成功' ,{icon:1,time:2000,offset:'20px'});
                    $("#layui-form")[0].reset();
                    layui.form.render();
                    parent.reloadPage();
				}else{
                    layer.msg( data.msg ,{icon:2,time:2000,offset:'20px'});
				}
			}
		}			
	);
      return false;
    });
//验证规则
form.verify({
    pass: [/(.+){3,16}$/, '密码必须3到16位']
    ,repass: function(value){
        if(value!=$("#pwd").val()){
            return '密码不一致';
        }
    }
  });
});
</script>
</body>
</html>
